<template>
    <article class="echart-chart">
        <div class="inside">
            <header><i class="el-icon-location-outline"></i> 犯罪指数</header>
            <div class="chartBox clearfix">
                <article>
                    <div class="regionType-button clearfix" v-show="!chartNoDataShow">
                        <el-button-group>
                            <el-button type="primary" v-for="(item, key, index) in CrimeData" :key="index" v-if="item" size="mini" @click="regionTypeChange(key)">{{regionTranslation(key)}}</el-button>
                        </el-button-group>
                    </div>
                    <div class="chart-div" id="Crime-chart" v-show="!chartNoDataShow"></div>
                    <p>注: 犯罪指数全美平均值是100。如果该指数高于100则意味着该犯罪率高于全国平均水平。相应的，如果低于100则意味着该犯罪率低于全国平均水平。</p>
                </article>
               <h4 v-show="chartNoDataShow">暂未查询到数据！</h4>
            </div>
            <p v-show="false">{{getCrime}}</p>
        </div>
    </article>
</template>

<script>
    export default {
        data() {
            return {
                CrimeData: null,//犯罪指数数据
                stateCrimeData: null,//州——犯罪指数数据
                cityCrimeData: null,//城市——犯罪指数数据
                zipCrimeData: null,//邮编——犯罪指数数据
                countyCrimeData: null,//郡县——犯罪指数数据
                neighbourhoodCrimeData: null,//附近——犯罪指数数据

                myEcharts: '',//犯罪指数——饼图
                regionType: 'state',//地区级别

                chartNoDataShow: false, //判断是否有无数据
            }
        },
        computed: {
            getCrime() {
                if(this.$store.getters.get_homejunctionData.crime){
                    this.CrimeData = this.$store.getters.get_homejunctionData.crime;
                    this.stateCrimeData = this.$store.getters.get_homejunctionData.crime.state;
                    this.cityCrimeData = this.$store.getters.get_homejunctionData.crime.city;
                    this.zipCrimeData = this.$store.getters.get_homejunctionData.crime.zip;
                    this.countyCrimeData = this.$store.getters.get_homejunctionData.crime.county;
                    this.neighbourhoodCrimeData = this.$store.getters.get_homejunctionData.crime.neighbourhood;

                    this.$nextTick(() => {
                        this.myEcharts = echarts.getInstanceByDom(document.getElementById('Crime-chart'));
                        if (this.myEcharts === undefined) {
                            this.myEcharts = echarts.init(document.getElementById('Crime-chart'));
                        }
                        this.myEcharts.showLoading();
                        window.addEventListener('resize', () => {
                            this.myEcharts.resize();
                        });

                        this.get_Crime();
                    })
                }
                return this.$store.getters.get_homejunctionData.crime
            }
        },
        created() {
        },
        mounted() {

        },
        beforeDestroy () {
            if(this.myEcharts){
                this.myEcharts.dispose();
            }
        },
        methods: {
            //获取犯罪指数数据
            get_Crime() {
                this.$nextTick(() => {
                    if(this.CrimeData){
                        this.chartNoDataShow = false;
                        this.Crime_charts(this.stateCrimeData.assault, this.stateCrimeData.burglary, this.stateCrimeData.larceny, this.stateCrimeData.murder, this.stateCrimeData.rape, this.stateCrimeData.robbery, this.stateCrimeData.vehicle, this.stateCrimeData.overall);
                    }else{
                        this.chartNoDataShow = true;
                    }
                })
            },
            //地区级别Change事件
            regionTypeChange(value){
                if (value == 'state') {
                    this.Crime_charts(this.stateCrimeData.assault, this.stateCrimeData.burglary, this.stateCrimeData.larceny, this.stateCrimeData.murder, this.stateCrimeData.rape, this.stateCrimeData.robbery, this.stateCrimeData.vehicle, this.stateCrimeData.overall);
                }else if (value == 'city') {
                    this.Crime_charts(this.cityCrimeData.assault, this.cityCrimeData.burglary, this.cityCrimeData.larceny, this.cityCrimeData.murder, this.cityCrimeData.rape, this.cityCrimeData.robbery, this.cityCrimeData.vehicle, this.cityCrimeData.overall);
                }else if (value == 'zip') {
                    this.Crime_charts(this.zipCrimeData.assault, this.zipCrimeData.burglary, this.zipCrimeData.larceny, this.zipCrimeData.murder, this.zipCrimeData.rape, this.zipCrimeData.robbery, this.zipCrimeData.vehicle, this.zipCrimeData.overall);
                }else if (value == 'county') {
                    this.Crime_charts(this.countyCrimeData.assault, this.countyCrimeData.burglary, this.countyCrimeData.larceny, this.countyCrimeData.murder, this.countyCrimeData.rape, this.countyCrimeData.robbery, this.countyCrimeData.vehicle, this.countyCrimeData.overall);
                }else if (value == 'neighbourhood') {
                    this.Crime_charts(this.neighbourhoodCrimeData.assault, this.neighbourhoodCrimeData.burglary, this.neighbourhoodCrimeData.larceny, this.neighbourhoodCrimeData.murder, this.neighbourhoodCrimeData.rape, this.neighbourhoodCrimeData.robbery, this.neighbourhoodCrimeData.vehicle, this.neighbourhoodCrimeData.overall);
                }
            },
            //犯罪指数——柱状图
            Crime_charts(assault, burglary, larceny, murder, rape, robbery, vehicle, overall) {
                this.myEcharts.hideLoading();
                this.myEcharts.setOption({
                    title: {
                        subtext: '全美平均值为100',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        data: ["袭击", "入室盗窃", "盗窃", "谋杀", "强奸", "抢劫", "盗车", "整体", "全美平均值"],
                        //坐标轴刻度标签的相关设置
                        axisLabel:{
                            color: '#969696',
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    yAxis: {
                        type: 'value',
                        //分隔线的相关设置
                        splitLine: {
                            lineStyle:{
                                color: '#f1f1f1'
                            }
                        },
                        //坐标轴刻度标签的相关设置
                        axisLabel: {
                            color: '#969696',
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    series: [{
                        name: '犯罪指数',
                        type: 'bar',
                        label: {
                            show: true,//柱子上边显示文字标签
                            position: 'top',
                            formatter: param => {
                                return param.value;
                            },
                            offset: [0, -5],
                            fontWeight: 'bold'
                        },
                        data: [
                            {
                                value: assault,
                            },
                            {
                                value: burglary,
                            },
                            {
                                value: larceny,
                            },
                            {
                                value: murder,
                            },
                            {
                                value: rape,
                            },
                            {
                                value: robbery,
                            },
                            {
                                value: vehicle,
                            },
                            {
                                value: overall,
                            },
                            {
                                value: 100,
                                itemStyle: {//柱子颜色
                                    color: '#cacbcc'
                                }
                            },
                        ],
                    }],
                    animationEasing: 'elasticOut',
                    color: ['#84c9ff'],

                });
            },

        },
        components: {}
    }
</script>

<style scoped lang="less" type="text/less">
</style>
